{% extends "base.html" %}

{% block title %}注册{% endblock %}

{% block content %}
<!-- 项目介绍部分 -->
<div class="hero-section min-vh-100 d-flex align-items-center">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 text-white fade-in">
                <h1 class="display-3 fw-bold mb-4">烟蒂绿航站</h1>
                <p class="lead mb-4">让每一个烟蒂都有回家的路，<br>用科技创新推动环保事业发展。</p>
                <a href="#register" class="btn btn-lg btn-outline-light">
                    立即加入 <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            <div class="col-lg-6 fade-in">
                <img src="{{ url_for('static', filename='images/yandi1.jpg') }}" class="img-fluid rounded-3 shadow-lg" alt="烟蒂回收">
            </div>
        </div>
    </div>
</div>

<!-- 数据统计部分 -->
<div class="stats-section py-5">
    <div class="container">
        <div class="row g-4 text-center">
            <div class="col-md-4 fade-in">
                <div class="stat-card">
                    <div class="display-4 text-primary mb-2">
                        <i class="bi bi-recycle"></i>
                    </div>
                    <h2 class="counter">1000+</h2>
                    <p class="text-muted">回收烟蒂数量</p>
                </div>
            </div>
            <div class="col-md-4 fade-in">
                <div class="stat-card">
                    <div class="display-4 text-success mb-2">
                        <i class="bi bi-people"></i>
                    </div>
                    <h2 class="counter">500+</h2>
                    <p class="text-muted">活跃用户</p>
                </div>
            </div>
            <div class="col-md-4 fade-in">
                <div class="stat-card">
                    <div class="display-4 text-warning mb-2">
                        <i class="bi bi-geo-alt"></i>
                    </div>
                    <h2 class="counter">50+</h2>
                    <p class="text-muted">覆盖城市</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 工作流程部分 -->
<div class="process-section py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">如何参与</h2>
        <div class="row g-4">
            <div class="col-md-3 fade-in">
                <div class="process-card text-center">
                    <div class="process-icon mb-3">
                        <i class="bi bi-person-plus"></i>
                    </div>
                    <h4>注册账号</h4>
                    <p class="text-muted">简单注册，即刻开启环保之旅</p>
                </div>
            </div>
            <div class="col-md-3 fade-in">
                <div class="process-card text-center">
                    <div class="process-icon mb-3">
                        <i class="bi bi-search"></i>
                    </div>
                    <h4>寻找烟蒂</h4>
                    <p class="text-muted">在指定区域收集烟蒂</p>
                </div>
            </div>
            <div class="col-md-3 fade-in">
                <div class="process-card text-center">
                    <div class="process-icon mb-3">
                        <i class="bi bi-camera"></i>
                    </div>
                    <h4>上传记录</h4>
                    <p class="text-muted">拍照记录并上传系统</p>
                </div>
            </div>
            <div class="col-md-3 fade-in">
                <div class="process-card text-center">
                    <div class="process-icon mb-3">
                        <i class="bi bi-gift"></i>
                    </div>
                    <h4>获得奖励</h4>
                    <p class="text-muted">获取积分兑换奖品</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 环保理念部分 -->
<div class="mission-section py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 fade-in">
                <img src="{{ url_for('static', filename='images/yandi2.jpg') }}" class="img-fluid rounded-3 shadow-lg" alt="环保理念">
            </div>
            <div class="col-lg-6 fade-in">
                <h2 class="mb-4">我们的环保理念</h2>
                <div class="mission-point mb-3">
                    <i class="bi bi-check-circle-fill text-success"></i>
                    <span>减少环境污染，保护生态环境</span>
                </div>
                <div class="mission-point mb-3">
                    <i class="bi bi-check-circle-fill text-success"></i>
                    <span>推广环保意识，培养环保习惯</span>
                </div>
                <div class="mission-point mb-3">
                    <i class="bi bi-check-circle-fill text-success"></i>
                    <span>创新回收方式，提高参与积极性</span>
                </div>
                <div class="mission-point mb-3">
                    <i class="bi bi-check-circle-fill text-success"></i>
                    <span>建立奖励机制，实现共同发展</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 注册表单部分 -->
<div id="register" class="register-section min-vh-100 d-flex align-items-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="card shadow-lg">
                    <div class="card-header text-center" style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); color: white;">
                        <h4 class="mb-0">注册账号</h4>
                    </div>
                    <div class="card-body p-5">
                        <!-- 原有的注册表单内容 -->
                        <form method="POST" class="needs-validation" novalidate>
                            <div class="mb-4">
                                <label for="username" class="form-label h6">用户名</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                                    <input type="text" class="form-control" id="username" name="username" required>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label for="password" class="form-label h6">密码</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                                    <input type="password" class="form-control" id="password" name="password" required>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label for="email" class="form-label h6">邮箱</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                    <button type="submit" class="btn btn-outline-primary" name="send_code" value="1">
                                        发送验证码
                                    </button>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label for="verify_code" class="form-label h6">验证码</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text"><i class="bi bi-shield-lock-fill"></i></span>
                                    <input type="text" class="form-control" id="verify_code" name="verify_code" required>
                                </div>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-lg text-white" 
                                        style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);">
                                    注册
                                </button>
                            </div>
                        </form>
                        <div class="mt-4 text-center">
                            <p class="mb-0 fs-6">已有账号？
                                <a href="{{ url_for('login') }}" style="color: #43cea2; text-decoration: none;">
                                    立即登录
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-control:focus {
        border-color: #43cea2;
        box-shadow: 0 0 0 0.2rem rgba(67, 206, 162, 0.25);
    }
    
    .input-group-text {
        background-color: transparent;
        border-right: none;
    }
    
    .form-control {
        border-left: none;
    }
    
    .input-group:focus-within {
        box-shadow: 0 0 0 0.2rem rgba(67, 206, 162, 0.25);
    }
    
    .input-group:focus-within .input-group-text,
    .input-group:focus-within .form-control {
        border-color: #43cea2;
    }
    
    .btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        transition: all 0.2s;
    }
    
    .project-info {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                    url('https://source.unsplash.com/1600x900/?nature,environment') no-repeat center center;
        background-size: cover;
        padding: 100px 0;
    }

    .feature-icon {
        font-size: 2.5rem;
        color: #43cea2;
    }

    .feature-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: none;
        transition: transform 0.3s ease;
    }

    .feature-card:hover {
        transform: translateY(-10px);
    }

    .bounce {
        animation: bounce 2s infinite;
        font-size: 2rem;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-20px);
        }
        60% {
            transform: translateY(-10px);
        }
    }

    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
    }

    ::-webkit-scrollbar-thumb {
        background: #43cea2;
        border-radius: 4px;
    }

    .hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                url("{{ url_for('static', filename='images/senlin1.jpg') }}") no-repeat center center;
    background-size: cover;
    }

    .stat-card {
        padding: 2rem;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-5px);
    }

    .process-card {
        padding: 2rem;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        height: 100%;
        transition: transform 0.3s ease;
    }

    .process-card:hover {
        transform: translateY(-5px);
    }

    .process-icon {
        font-size: 2.5rem;
        color: #43cea2;
    }

    .mission-point {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1.1rem;
    }

    .register-section {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
                url("{{ url_for('static', filename='images/senlin2.jpg') }}") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    }

    html {
        scroll-behavior: smooth;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const fadeElements = document.querySelectorAll('.fade-in');
    
    function checkFade() {
        fadeElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const elementBottom = element.getBoundingClientRect().bottom;
            const isVisible = (elementTop < window.innerHeight) && (elementBottom >= 0);
            
            if (isVisible) {
                element.classList.add('visible');
            }
        });
    }
    
    // 初始检查
    checkFade();
    
    // 滚动时检查
    window.addEventListener('scroll', checkFade);
});

let countdown = 0;
const countdownBtn = document.querySelector('button[name="send_code"]');

// 发送验证码
async function sendVerificationCode() {
    const emailInput = document.getElementById('email');
    const email = emailInput.value.trim();
    
    if (!email) {
        alert('请输入邮箱地址');
        return;
    }
    
    if (!isValidEmail(email)) {
        alert('请输入有效的邮箱地址');
        return;
    }

    try {
        const response = await fetch('/send_code', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `email=${encodeURIComponent(email)}`
        });
        
        const data = await response.json();
        
        if (data.success) {
            startCountdown();
            alert(data.message);
        } else {
            alert(data.message);
        }
    } catch (error) {
        alert('发送验证码失败，请稍后重试');
    }
}

// 验证邮箱格式
function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// 倒计时功能
function startCountdown() {
    countdown = 60;
    countdownBtn.disabled = true;
    
    const timer = setInterval(() => {
        countdown--;
        countdownBtn.textContent = `重新发送(${countdown}s)`;
        
        if (countdown <= 0) {
            clearInterval(timer);
            countdownBtn.disabled = false;
            countdownBtn.textContent = '发送验证码';
        }
    }, 1000);
}

// 表单提交前验证
document.querySelector('form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const email = document.getElementById('email').value.trim();
    const verifyCode = document.getElementById('verify_code').value.trim();
    
    try {
        const response = await fetch('/verify_code', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `email=${encodeURIComponent(email)}&verify_code=${encodeURIComponent(verifyCode)}`
        });
        
        const data = await response.json();
        
        if (data.success) {
            // 验证成功，提交表单
            this.submit();
        } else {
            alert(data.message);
        }
    } catch (error) {
        alert('验证失败，请稍后重试');
    }
});

// 绑定发送验证码按钮点击事件
countdownBtn.addEventListener('click', function(e) {
    e.preventDefault();
    if (!this.disabled) {
        sendVerificationCode();
    }
});
</script>
{% endblock %} 